<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Driving</title>
		<link rel="stylesheet" type="text/css" href="style.css"></link>
		<script
			src="http://ditu.google.com/maps?file=api&;v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
			type="text/javascript"></script>
		<STYLE type=text/css>
			#frmholder { 
			   width: 1000px;
			   heigh:100px;
			   border: 1px solid #000;
			   border-bottom: 0;
			   text-align: center;
			   background: #fff;
			}
			#mapholder {
			   width: 700px;
			   height: 600px;
			   float: left;
			   border: 1px solid #000;
			   background: #fff;
			}
			#dirholder {
			   width: 300px;
			   float: left;
			   border: 1px solid #000;
			   height: 600px;
			   border-left: 0;
			   background: #fff;
			   overflow: auto;
			}
		</STYLE>
		<script type="text/javascript">
	         var cenx = 31.288720;
	         var ceny = 120.665674;
	         var stzoom=15;
	         var map;
	         var directions;
	        function init(){
	            if (GBrowserIsCompatible()){
				    var mapOptions = {
                    googleBarOptions : { style : "new"}
                       }
	                map=new GMap2(document.getElementById("mapholder"));
	                var loc = new GLatLng(cenx,ceny);
	                map.setCenter(loc,stzoom);
					map.addControl(new GLargeMapControl());
					
					//GHierarchicalMapTypeControl 通常需要一些初始化才能以正确的顺序显示联级"菜单"中的地图类型。
					var mapControl = new GHierarchicalMapTypeControl();
        
        		   //设置地图类型菜单关系
        		    mapControl.clearRelationships();
        		    mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
					map.addControl(mapControl);  
					//map.addControl(new GMapTypeControl());//词句添加的地图模型为一般的地图和卫星地图				
					directions = new GDirections(map); 
					
					 //添加地图缩略图
		            var oerviewMapControl = new GOverviewMapControl();
		            map.addControl(oerviewMapControl);
	
					//draggable 表示该标记是否可以移动，true为可以 false为否
					var marker = new GMarker(loc, {
						draggable:true
					});
					GEvent.addListener(marker, "dragstart", function(){
						map.closeInfoWindow();
					});
					GEvent.addListener(marker, "dragend", function(){
						marker.openInfoWindowHtml("Just bouncing along...");
					});
					map.addOverlay(marker);
					map.openInfoWindow(map.getCenter(),document.createTextNode("ZhiHuiGuan:Tong Yuan Road Information Building Two Floor"));
					map.enableGoogleBar();
	            }
	        }    
			function getdirections() {
			   var fmaddr = document.getElementById("fromaddress").value;
			   var toaddr = document.getElementById("toaddress").value;
			   var avoid = document.getElementById("avoidHighways").value;
			
			   if (!directions) {
			      directions = new GDirections(map);
			   }
			   GEvent.addListener(directions, "addoverlay", function() {
			      var route = directions.getRoute(0);
			      var bounds = new GLatLngBounds();
			      var disp = "";
			      disp = disp + "<h4>Directions</h4>"+directions.getDistance().html+" about "+directions.getDuration().html+"<br /><hr size='1' noshade='noshade' />";
			      disp = disp + "<table>";
			      for(i=0;i< route.getNumSteps();i++) {
			         var stp = route.getStep(i);
			         bounds.extend(stp.getLatLng());
			 
			         var clr = (i%2)?"#ccc":"#eee";
			         disp = disp + "<tr valign='top'><td style='background:"+clr+";'>" + stp.getDescriptionHtml() + "</td>";
			         disp = disp + "<td style='background:"+clr+";'>" + stp.getDistance().html+"</td></tr>";
			      }
			       disp = disp + "</table>";
			       document.getElementById('dirholder').innerHTML = disp;
			       map.setZoom(map.getBoundsZoomLevel(bounds));
			       map.setCenter(loc,stzoom);
			   });
			      GEvent.addListener(directions, "error", function(){
			      alert("no find way!");
			   });
			 	  if (avoid == 1) {
			   	directions.load("from: " + fmaddr + " to: " + toaddr, {
			   		getSteps: true,
			   		avoidHighways: true});
			   }else{
			   	directions.load("from: " + fmaddr + " to: " + toaddr, {
			   		getSteps: true,
			   		avoidHighways: false});
			   }
						}
	        window.onload=init;
	        window.onunload=GUnload;
    </script>

	</head>
	<body>
		<div id="frmholder">
			<br />
			<form onsubmit="getdirections();return false;">
				<h4>This Driving travelMode:</h4>
			<br/>
				From Address:
				<input size="10" id="fromaddress" value=" " />
				To Address:
				<input size="10" id="toaddress" value=" " />
	     <th>AvoidHighways</th>
         <td> <select id="avoidHighways" name="avoidHighways">
                      <option value="1">yes</option>
                      <option value="2">no</option>
               </select>
				<input type="submit" value="get road" />
			</form>
			
		</div>
		<div id="mapholder"></div>
		<div id="dirholder"></div>

	</body>
</html> 